<template>
	<view class="systeminformation">
		<block  v-for="(item, index) in list">
			<view class="systemList" v-if="list.length > 0">
				<view class="systemBox me-fx-row-sb-c">
					<view class="systemBoxLeft">
						{{item.theme}}
					</view>
					<view class="systemBoxTime">
						{{item.created_at}}
					</view>
				</view>
				<view class="text">
					{{item.content}}
				</view>
				<view class="unfoldXQ" v-if="item.content.length > 40">
					展开详情
				</view>
			</view>
		</block>
		<view class="nohaveData" v-if="nohaveData">
			<image src="../../static/img/newimg/xx.png" mode=""></image>
			暂时没有更多数据啦~
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				list: [],
				last_page: 1,
				nohaveData: false,
				isZhankai:false
			}
		},
		created(){
			this.getIndex(this.page)
		},
		methods: {
			getIndex(page) {
				this.$u.get('/system_message/list/' + page).then(res => {
						if (res) {
							if (res.data.list.data.length > 0) {
								this.nohaveData = false
								if (res.data.list.last_page == 1) {
									this.list = res.data.list.data;
								} else {
									this.list = this.list.concat(res.data.list.data)
								}
							} else {
								this.nohaveData = true
							}
						}
					})
					.catch((res) => {})
			},
			goLook(id){
				console.log(id,'id')
			},
			onReachBottom() { //uniapp 监听下拉加载生命周期
				if (this.page >= this.last_page) {
					uni.showToast({
						title: '没有更多数据了',
						duration: 1000,
						icon: 'none'
					})
					return
				}
				this.page++
				this.getIndex(this.page)
			},
			
		}
	}
</script>

<style>
	.systemList{
		width:96%;
		margin: auto;
		background:rgba(255,255,255,1);
		box-shadow:0rpx 8rpx 28rpx 0rpx rgba(235,239,242,1);
		border-radius:8rpx;
		overflow: hidden;
		border-top: 3rpx solid rgba(138,72,245,1);
		padding: 35rpx 24rpx 0;
		margin-top:20rpx
	}
.systeminformation{
	background-color: white;
	}
	.systemBoxLeft{
		font-size:30rpx;
		font-weight:bold;
		color:rgba(34,34,34,1);
	}
	.systemBoxTime{
		font-size:26rpx;
		color:rgba(68,68,68,1);
	}
	.text{
		font-size:28rpx;
		color:rgba(51,51,51,1);
		line-height:42rpx;
		padding:  30rpx 0;
	}
	.unfoldXQ{
		text-align: center;
		font-size:28rpx;
		color:rgba(112,96,248,1);
		height: 80rpx;
		line-height: 80rpx;
		border-top: 1rpx solid #EBEFF2;
		}
		.nohaveData image {
			width: 100%;
			height: 537rpx;
			display: block;
		}
		
		.nohaveData {
			text-align: center;
			padding: 16rpx 30rpx;
		
		}
</style>
